<!DOCTYPE HTML>
<html lang="zh">

<head>
    <!--Setting-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <meta http-equiv="Cache-Control" content="no-transform">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta name="apple-mobile-web-app-capable" content="新辉">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no,email=no,adress=no">
    <meta name="browsermode" content="application">
    <meta name="screen-orientation" content="portrait">
    <meta name="theme-version" content="1.3.0">
    <meta name="root" content="/">
    <link rel="dns-prefetch" href="http://gnosissky.github.io">
    <!--SEO-->

<meta name="keywords" content="工具箱" />


<meta name="description" content="前面把后台的验证机制梳理了一下，主要是Cookie、Session和Token的使用，Django：Cookie设置及跨域问题处理、Django实：Cookie搭配Session使用、Djang..." />


<meta name="robots" content="all" />
<meta name="google" content="all" />
<meta name="googlebot" content="all" />
<meta name="verify" content="all" />
    <!--Title-->

<title>
    
    新辉
</title>

<link rel="alternate" href="/atom.xml" title="新辉" type="application/atom+xml">


<link rel="icon" href="/favicon.ico">

    


<link rel="stylesheet" href="/css/bootstrap.min.css?rev=3.3.7.css">
<link rel="stylesheet" href="/css/font-awesome.min.css?rev=4.7.0.css">
<link rel="stylesheet" href="/css/style.css?rev=@@hash.css">

    
<div class="hide">
    <script type="text/javascript">
    var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");
    document.write(unescape("%3Cspan class='cnzz_stat_icon_1263868967 hide' %3E%3Cscript%20src%3D%22https%3A%2F%2Fs95.cnzz.com%2Fz_stat.php%3Fweb_id%3D1272564536%22%3E%3C%2Fscript%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s19.cnzz.com/z_stat.php%3Fid%3D1263868967%26show%3Dpic1' type='text/javascript'%3E%3C/script%3E"));
    </script>
</div>




    

<meta name="generator" content="Hexo 5.4.2"></head>
<!--[if lte IE 8]>
<style>
    html{ font-size: 1em }
</style>
<![endif]-->
<!--[if lte IE 9]>
<div style="ie">你使用的浏览器版本过低，为了你更好的阅读体验，请更新浏览器的版本或者使用其他现代浏览器，比如Chrome、Firefox、Safari等。</div>
<![endif]-->
<body>
    <header class="main-header"  style="background-image:url(
    https://hexo-theme-snippet-1251680922.cos.ap-beijing.myqcloud.com/img/banner.jpg)"
     >
    <div class="main-header-box">
        <a class="header-avatar" href="/" title='John Doe'>
            <img src="/img/avatar.jpg" alt="logo头像" class="img-responsive center-block">
        </a>
        <div class="branding">
            <!--<h2 class="text-hide">Snippet主题,从未如此简单有趣</h2>-->
            
            <img src="/img/branding.png" alt="Snippet 博客主题" class="img-responsive center-block">
            
        </div>
    </div>
</header>
    <nav class="main-navigation">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="navbar-header"><span class="nav-toggle-button collapsed pull-right" data-toggle="collapse" data-target="#main-menu" id="mnav">
                        <span class="sr-only"></span>
                        <i class="fa fa-bars"></i>
                    </span>
                    <a class="navbar-brand" href="http://gnosissky.github.io">
                        新辉</a>
                </div>
                <div class="collapse navbar-collapse" id="main-menu">
                    <ul class="menu">
                        
                        <li role="presentation" class="text-center">
                            <a href="/"><i class="fa "></i>
                                Home</a>
                        </li>
                        
                        <li role="presentation" class="text-center">
                            <a href="/categories/前端/"><i class="fa "></i>
                                前端</a>
                        </li>
                        
                        <li role="presentation" class="text-center">
                            <a href="/categories/后端/"><i class="fa "></i>
                                后端</a>
                        </li>
                        
                        <li role="presentation" class="text-center">
                            <a href="/categories/工具/"><i class="fa "></i>
                                工具</a>
                        </li>
                        
                        <li role="presentation" class="text-center">
                            <a href="/archives/"><i class="fa "></i>
                                时间轴</a>
                        </li>
                        
                    </ul>
                </div>
            </div>
        </div>
    </div>
</nav>
    <section class="content-wrap">
        <div class="container">
            <div class="row">
                <main class="col-md-8 main-content m-post">
                    <p id="process"></p>
<article class="post">
    <div class="post-head">
        <h1 id="">
            
            NO Title!
            
        </h1>
        <div class="post-meta">
    
    <span class="categories-meta fa-wrap">
        <i class="fa fa-folder-open-o"></i>
        
    </span>
    
    
    <span class="fa-wrap">
        <i class="fa fa-tags"></i>
        <span class="tags-meta">
            
        </span>
    </span>
    
    
    
    <span class="fa-wrap">
        <i class="fa fa-clock-o"></i>
        <span class="date-meta">
            2023/01/03</span>
    </span>
    
    
</div>
        
        
    </div>
    
    <div class="post-body post-content">
        <p>前面把后台的验证机制梳理了一下，主要是Cookie、Session和Token的使用，<a target="_blank" rel="noopener" href="https://www.jb51.net/article/223395.htm">Django：Cookie设置及跨域问题处理</a>、<a target="_blank" rel="noopener" href="https://www.jb51.net/article/223398.htm">Django实：Cookie搭配Session使用</a>、<a target="_blank" rel="noopener" href="https://www.jb51.net/article/223377.htm">Django：基于Token的验证使用</a>，当然这并不表示Token是最优的，还是需要根据项目需求来选择的，也可以混合搭配使用。</p>
<p><img src="https://img.jbzj.com/file_images/article/202109/2021091811493354.png" alt="img"></p>
<p>今天要做的事将后台发送过来的Token存储到客户端中，这里可以存Cookie、LocalStorage、SessionStorage等地方，Cookie前面已经介绍过了这里直接忽略，我们主要说说LocalStorage和SessionStorage。</p>
<p><img src="https://img.jbzj.com/file_images/article/202109/2021091811493455.jpg" alt="img"></p>
<h2 id="什么是LocalStorage"><a href="#什么是LocalStorage" class="headerlink" title="什么是LocalStorage"></a>什么是LocalStorage</h2><p>LocalStorage译为“本地存储器”，是HTML5中新增的一个存储对象，跟Cookie一样也是用来本地存储来的，但是解决了Cookie存储空间不足的问题(cookie每条存储空间为4k)，而localStorage浏览器一般支持5M，通常以键/值对形式的字符串进行存储。</p>
<h2 id="什么是SessionStorage"><a href="#什么是SessionStorage" class="headerlink" title="什么是SessionStorage"></a>什么是SessionStorage</h2><p>SessionStorage译为“会话存储”，也是HTML5新增的一个存储对象， 用于本地临时存储同一窗口的数据，在关闭窗口之后将会删除这些数据，SessionStorage浏览器一般支持5M，通常以键/值对形式的字符串进行存储。</p>
<h2 id="LocalStorage与SessionStorage的区别"><a href="#LocalStorage与SessionStorage的区别" class="headerlink" title="LocalStorage与SessionStorage的区别"></a>LocalStorage与SessionStorage的区别</h2><p>LocalStorage生命周期是永久,除非主动清除LocalStorage信息，否则这些信息将一直存放在客户端。而SessionStorage生命周期是临时，仅在当前会话窗口有效，关闭页面或浏览器数据就会自动被清除。</p>
<p><img src="https://img.jbzj.com/file_images/article/202109/2021091811493456.jpg" alt="img"></p>
<h2 id="LocalStorage与SessionStorage的特点"><a href="#LocalStorage与SessionStorage的特点" class="headerlink" title="LocalStorage与SessionStorage的特点"></a>LocalStorage与SessionStorage的特点</h2><p>1.不同浏览器之间无法共享LocalStorage或SessionStorage中的数据。</p>
<p>2.LocalStorage和SessionStorage可以使用统一的API接口。</p>
<p>3.LocalStorage或SessionStorage通常以键/值对形式的字符串进行存储，所以在存储时需要对数据格式进行转换，使用JSON.stringify方法将对象转换成字符串，提取时用JSON.parse方法将字符串转换成对象。</p>
<p>4.LocalStorage或SessionStorage是HTML5的新属性，所以需要较新的浏览器才支持。</p>
<p><img src="https://img.jbzj.com/file_images/article/202109/2021091811493457.jpg" alt="https://img1.sycdn.imooc.com/5bab321d0001972206300152.jpg"></p>
<h2 id="LocalStorage与SessionStorage的用法"><a href="#LocalStorage与SessionStorage的用法" class="headerlink" title="LocalStorage与SessionStorage的用法"></a>LocalStorage与SessionStorage的用法</h2><p>因为LocalStorage与SessionStorage的应用一致，这里就不多做解释了，以LocalStorage为例。</p>
<p>LocalStorage提供了5个方法，分别是clear（清除LocalStorage）、getItem（获取本地数据）、key（取下标对应键的值）、removeItem（删除以保存数据）、setItem（设置保存数据）。</p>
<p><img src="https://img.jbzj.com/file_images/article/202109/2021091811493458.png" alt="img"></p>
<p> 下面是具体的使用方法和说明，直接用localStorage.就可以带出来对应的方法，我们只要理解其对应的应用属性就可以使用了。</p>
<p>这样我们就可以使用localStorage.setItem(‘键’,’值’)将服务器传过来的数据存入客户端本地，存储前记得将数据进行转换。</p>
<p><img src="https://img.jbzj.com/file_images/article/202109/2021091811493559.png" alt="img"></p>
<h2 id="LocalStorage与SessionStorage应用实例"><a href="#LocalStorage与SessionStorage应用实例" class="headerlink" title="LocalStorage与SessionStorage应用实例"></a>LocalStorage与SessionStorage应用实例</h2><p>下面是我实际开发中的应用，前面我通过JsonResponse向前端发送了JSON数据，里面包含了data（用户请求的数据）、token（服务器生成的token）和code（后台处理的状态码），前端收到这些数据后对数据进行处理，判断code返回是否成功，如果成功我们就解析数据并将数据存入本地，否则则访问失败。</p>
<p><img src="https://img.jbzj.com/file_images/article/202109/2021091811493560.png" alt="img"></p>
<p>这里我用 localStorage和sessionStorage分别存了两个数据，localStorage是自定义的，sessionStorage是从后台获取的，打开浏览器开发者工具，在Application中我们可以在Storage下面的localStorage和sessionStorage分别找到我们存储的对应值。</p>
<p><img src="https://img.jbzj.com/file_images/article/202109/2021091811493561.png" alt="img"></p>

    </div>
    
    <div class="post-footer">
        <div>
            
            转载声明：
            商业转载请联系作者获得授权,非商业转载请注明出处 © <a href="" target="_blank">Snippet</a>
            
            
        </div>
        <div>
            
        </div>
    </div>
</article>
<div class="article-nav prev-next-wrap clearfix">
    
    <a href="/2023/04/01/%E5%A4%9A%E6%95%B0%E6%8D%AE%E6%BA%90%E6%9F%A5%E8%AF%A2/" class="pre-post btn btn-default" title='配置多数据源'>
        <i class="fa fa-angle-left fa-fw"></i><span class="hidden-lg">上一篇</span>
        <span class="hidden-xs">
            配置多数据源</span>
    </a>
    
    
    <a href="/2022/04/26/CSS/" class="next-post btn btn-default" title='CSS日常'>
        <span class="hidden-lg">下一篇</span>
        <span class="hidden-xs">
            CSS日常</span><i class="fa fa-angle-right fa-fw"></i>
    </a>
    
</div>

<div id="comments">
    
    
<div class="utteranc">
  
  <script
    src='https://utteranc.es/client.js'
    repo='shenliyang/snippet-comment'
    issue-term='pathname'
    issue-number=''
    theme='github-light'
    label=''
    crossorigin='anonymous'
    async
  ></script>
</div>



</div>

                </main>
                
                    <aside id="article-toc" role="navigation" class="col-md-4">
    <div class="widget">
        <h3 class="title">
            Table of Contents
        </h3>
        
        <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BB%80%E4%B9%88%E6%98%AFLocalStorage"><span class="toc-text">什么是LocalStorage</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BB%80%E4%B9%88%E6%98%AFSessionStorage"><span class="toc-text">什么是SessionStorage</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#LocalStorage%E4%B8%8ESessionStorage%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-text">LocalStorage与SessionStorage的区别</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#LocalStorage%E4%B8%8ESessionStorage%E7%9A%84%E7%89%B9%E7%82%B9"><span class="toc-text">LocalStorage与SessionStorage的特点</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#LocalStorage%E4%B8%8ESessionStorage%E7%9A%84%E7%94%A8%E6%B3%95"><span class="toc-text">LocalStorage与SessionStorage的用法</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#LocalStorage%E4%B8%8ESessionStorage%E5%BA%94%E7%94%A8%E5%AE%9E%E4%BE%8B"><span class="toc-text">LocalStorage与SessionStorage应用实例</span></a></li></ol>
        
    </div>
</aside>
                
            </div>
        </div>
    </section>
    <footer class="main-footer">
    <div class="container">
        <div class="row">
        </div>
    </div>
</footer>
<a id="back-to-top" class="icon-btn hide">
    <i class="fa fa-chevron-up"></i>
</a>
    <div class="copyright">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="busuanzi">
    
</div>
            </div>
            <div class="col-sm-12">
                <span>Copyright &copy;
                    2023
                    
                </span> |
                <span>
                    Powered by <a href="//hexo.io" class="copyright-links" target="_blank" rel="nofollow">Hexo</a>
                </span> |
                <span>
                    Theme by <a href="//github.com/shenliyang/hexo-theme-snippet.git" class="copyright-links" target="_blank" rel="nofollow">Snippet</a>
                </span>
            </div>
        </div>
    </div>
</div>



<script src="/assets/tagcanvas.min.js?rev=2.9.js"></script>

<script>
var tagOption = {
    textColour: '#444', // 字体颜色
    outlineMethod: 'block', // 选中模式
    outlineColour: '#FFDAB9', // 选中模式的颜色
    interval: 30 || 30, // 动画帧之间的时间间隔，值越大，转动幅度越大
    textHeight: 13,
    outlineRadius: 3,
    freezeActive: true || '', // 选中的标签是否继续滚动
    frontSelect: true || '', // 不选标签云后部的标签
    initial: [0.1, -0.1],
    depth: 0.5,
    decel: 0.95,
    maxSpeed: 0.03,
    reverse: true || '', // 是否反向触发
    fadeIn: 500, // 进入动画时间
    wheelZoom: false || '' // 是否启用鼠标滚轮
}
TagCanvas.Start('tag-cloud-3d', '', tagOption);
</script>



<script src="/js/app.js?rev=@@hash.js"></script>

</body>
</html>